<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ page import="java.sql.*, java.util.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
    // 数据库连接相关信息
    Connection conn = null;
    Statement stmt = null;
    ResultSet rs = null;
    String url = "jdbc:mysql://localhost:3306/books?serverTimezone=Asia/Shanghai";  // 替换为实际的时区
    String user = "root";  // 替换为实际的数据库用户名
    String password = "123456";  // 替换为实际的数据库密码

    try {
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection(url, user, password);
        // 查询 t_stu_log 表的数据
        String sql = "SELECT student_id, log_message, created_at FROM t_stu_log";
        stmt = conn.createStatement();
        rs = stmt.executeQuery(sql);
        // 将查询结果放入一个 List 中
        List<Map<String, Object>> logList = new ArrayList<>();
        while (rs.next()) {
            Map<String, Object> logEntry = new HashMap<>();
            logEntry.put("student_id", rs.getInt("student_id"));
            logEntry.put("log_message", rs.getString("log_message"));
            logEntry.put("created_at", rs.getTimestamp("created_at"));
            logList.add(logEntry);
            pageContext.setAttribute("logList", logList); // 存储查询结果到 pageContext
        }
    } catch (SQLException e) {
        e.printStackTrace(); // 错误输出
    } catch (ClassNotFoundException e) {
        e.printStackTrace(); // 错误输出
    } finally {
        // 确保资源关闭
        try {
            if (rs != null) rs.close();
            if (stmt != null) stmt.close();
            if (conn != null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace(); // 错误输出
        }
    }
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Log</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部 CSS 文件 -->
    <style>
        /* 整体页面样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f4f8;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        /* 标题样式 */
        h1 {
            text-align: center;
            color: #34495e;
            font-size: 3rem;
            margin-bottom: 30px;
            font-weight: 600;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 提示文本样式 */
        p {
            text-align: center;
            color: #7f8c8d;
            font-size: 1.2rem;
        }

        /* 表格样式 */
        table {
            width: 90%;
            max-width: 1000px;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* 表头样式 */
        th {
            background-color: #2980b9;
            color: white;
            padding: 15px;
            text-align: left;
            font-size: 1.1rem;
            text-transform: uppercase;
        }

        /* 表格单元格样式 */
        td {
            padding: 15px;
            border-bottom: 1px solid #ddd;
            text-align: left;
            font-size: 1rem;
            color: #2c3e50;
        }

        /* 行的交替背景色 */
        tr:nth-child(even) {
            background-color: #f9fafb;
        }

        /* 鼠标悬停时改变行的背景色 */
        tr:hover {
            background-color: #f39c12;
            color: white;
            cursor: pointer;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            body {
                padding: 20px;
            }
            table {
                width: 100%;
                font-size: 0.9rem;
            }
            h1 {
                font-size: 2rem;
            }
        }

        /* 提示没有日志信息的样式 */
        .no-logs {
            font-size: 1.5rem;
            font-weight: bold;
            color: #e74c3c;
        }

    </style>
</head>
<body>
<h1>学生记录日志</h1>
<c:if test="${not empty logList}">
    <table>
        <thead>
        <tr>
            <th>学生ID</th>
            <th>日志信息</th>
            <th>添加时间</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="logEntry" items="${logList}">
            <tr>
                <td>${logEntry.student_id}</td>
                <td>${logEntry.log_message}</td>
                <td>${logEntry.created_at}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</c:if>
<!-- 提示没有日志的情况 -->
<c:if test="${empty logList}">
    <p class="no-logs">暂时没有记录...</p>
</c:if>
</body>
</html>
